<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标设计UI</title>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background-color: black;
            width: 100vw;
            height: 100vh;
            position: relative;
        }
        .border{
            border: 3px solid red;
            position: absolute;
        }
    </style>
</head>
<body id="bg">
    <script>
        var background = $('#bg');
        var mouse = null;
        background.mousedown(function(e){
            $('#bg').append('<div class="border"></div>');
            var beginX = e.pageY;
            var beginY = e.pageX;
            var endX = null;
            var endY = null;
            var w,h;
            $('#bg').children('.border:last-child').css({
                'top':beginX+'px',
                'left':beginY+'px'
            });
            $('#bg')[0].onmousemove = function(e){
                endX = e.pageY;
                endY = e.pageX;
                w = endX - beginX;
                h = endY - beginY;
            }
            mouse = setInterval(function(){
                if(w <= 0 || h <= 0){
                    $('#bg').children('.border:last-child').css({
                        'top':endX+'px',
                        'left':endY+'px'
                    });
                    h = Math.abs(w);
                    w = Math.abs(h);
                    console.log("("+w+","+h+")");
                }
                $('#bg').children('.border:last-child').css({
                    'width':h+'px',
                    'height':w+'px'
                });
            },10);
        }).mouseup(function(e){
            //鼠标弹起，各个事件结束
            $('#bg')[0].onmousemove = null;
            clearInterval(mouse);
            var div = $('#bg').children('.border:last-child');
            console.log('添加的div的位置：('+div.css('top')+','+div.css('left')+')');
            console.log('添加的div的长宽：('+div.css('width')+','+div.css('height')+')');
        });
        $('.border').each(function(){
            $(this).click(function(){
                console.log("鼠标点击了");
            })
        });
    </script>
</body>
</body>
</html>